<template>
	<div class="student">
		<el-button type="success" class="btn" icon="edit" @click="componentsShow('add',params)">添加学生</el-button>
		 <router-link to="/home">
         	<el-button type="info" class="add btn" style='margin-left: 5px;' @click="cancelf" icon="document">首页</el-button>
        </router-link>
        <!-- <el-button type="danger" class="btn" :disabled="multipleDeleteDisabled" icon="delete" @click="componentsShow('multipleDelete','')">批量删除</el-button> -->
        <i class="el-icon-close close" @click="cancel"></i>

        <AddComponent v-if="portComponents.add.toggle"  @close="componentsHide" E :params="portComponents.add.params"></AddComponent>

        <ChangeComponent v-if="portComponents.change.toggle"  @close="componentsHide"  :params="portComponents.change.params" :className="params.row.mc"></ChangeComponent>


        <BjComponent v-if="portComponents.bujiao.toggle"  @close="componentsHide"  :params="portComponents.bujiao.params" ></BjComponent>

        <!-- 单独删除组件 -->
        <!-- <DelComponent v-if="portComponents.singleDelete.toggle"  @close="componentsHide"  :data="portComponents.singleDelete.data"></DelComponent> -->
        <DelComponent v-if="portComponents.singleDelete.toggle"  @close="componentsHide" :params="portComponents.singleDelete.params"></DelComponent>

        <!-- 批量删除组件 -->
        <!-- <DelComponent v-if="portComponents.multipleDelete.toggle"  @close="componentsHide"  :data="portComponents.multipleDelete.data"></DelComponent> -->

        <!-- 表格区域 -->


		<el-table
	        :data="dataList"
	         stripe
             border
	        align="center"
	        class="table"
	        @select="checkSelect"
	        @select-all="checkall">
	        <div slot='empty'>
	            <img src="../../../../assets/img/empty.png" style="width:40px;vertical-align: middle;">
	            <span style="vertical-align: middle;">暂时还没有内容哦!</span>
	        </div>

	        <!-- <el-table-column type="selection" width="55"></el-table-column> -->

	        <el-table-column
	            :prop="v.prop"
	            :label="v.label"
	            v-for="(v,index) in portTitleList"
	            align="center"
	            show-overflow-tooltip
	            v-if="v.hide != 0"
	            :align="v.align || 'center'"
	            :fixed="v.fixed"
	            :formatter="v.formatter"
	            :class-name="v.columnStyle"
	            :width="v.width"
	            :min-width="v.minWidth || '150'"
	            :header-align="v.headerAlign || 'center'"
	            >
	            <template scope="scope">
	                <div slot="reference">
                        <img
                        :src="scope.row.xb == '男' ? $store.state.sexImg.boy : $store.state.sexImg.girl"
                        style="width:20px;vertical-align:middle;"
                        v-if="scope.column.property == 'zwm'">
                        <span style="vertical-align:middle;">{{ scope.row[scope.column.property] }}</span>
                    </div>
	            </template>
	        </el-table-column>

	        <el-table-column
                label="操作"
                width="100"
                align="center"
                fixed="right">
                <template scope="scope">
                    <!-- <el-button size="small" type="text" @click="componentsShow(v.type,scope)" v-for="v in portBntList">{{v.name}}</el-button> -->
										<!-- <el-button size="small" type="text"  @click="componentsShow('bujiao',scope)">缴费</el-button> -->
										<router-link  :to="{path:'/cost/pay',query: {iid:scope.row.zwm,id:scope.row.id}}">
											<!-- <el-button size="small" type="text" @click="componentsShow('jiaofei',scope)">缴费</el-button> -->
											<el-button size="small" type="text">缴费</el-button>
										</router-link>
										<router-link  :to="{path:'/cost/payjl',query: {iid:scope.row.zwm,id:scope.row.id}}">
											<!-- <el-button size="small" type="text" @click="componentsShow('jiaofei',scope)">补交</el-button> -->
											<el-button size="small" type="text" >补交</el-button>
										</router-link>
										<!-- <el-button size="small" type="text"  @click="componentsShow('bujiao',scope)">补交</el-button> -->

                </template>
            </el-table-column>
	    </el-table>

		<!-- 分页查询区域 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pageindex"
            :page-sizes="pagesizes"
            :page-size="pagesize"
            :layout="layout"
            :total="total"
            class="class-page">
        </el-pagination>
	</div>
</template>

<script type="text/javascript">
    import AddComponent from './add'
    import ChangeComponent from './change'
    import DelComponent from './del'
    import BjComponent from './bujiao'
	export default {
		props: ['params'],
        components: {
            AddComponent,
            ChangeComponent,
						BjComponent,
            DelComponent
        },
		data () {
			return {
				type:'1',

				dataList: [],

				multipleDelNum: '',

				/*分页属性设置*/
                layout: 'total, sizes, prev, pager, next, jumper',//组件布局
             pageindex: 1,//当前分页页码
             pagesizes: [12, 24, 36, 72],//显示个数的选择器选项
             pagesize: 12,//每页显示条目数
             total: 0,//总条数

				portTitleList: [
					{
                        prop:'id',
                        label:'id',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    },{
                        prop:'zwm',
                        label:'姓名',
                        hide:1,
                        align:'left',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'left'
                    },{
                        prop:'csrq',
                        label:'出生日期',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    },
										{
                        prop:'ysbjmc',
                        label:'预设班级',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    },
										{
                        prop:'dh',
                        label:'学生手机号',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    },
										{
                        prop:'zsly',
                        label:'招生来源',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    },
										{
                        prop:'fmdh',
                        label:'父母手机号',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    },{
                        prop:'wx',
                        label:'微信号',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    },{
                        prop:'jtdz',
                        label:'家庭地址',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    },{
                        prop:'glxx',
                        label:'公立学校',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    },{
                        prop:'njbj',
                        label:'年级班级',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    },
										// {
                    //     prop:'bj',
                    //     label:'班级',
                    //     hide:1,
                    //     align:'center',
                    //     fixed:false,
                    //     width:'',
                    //     minWidth:'120',
                    //     headerAlign:'center'
                    // },
                    {
                        prop:'yuer',
                        label:'余额',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    }
				],

                 /*组件区域*/
                portComponents: {
                    singleDelete: {
                        type: 'singleDelete',
                        toggle: false,
                        params: '',
                        data: {
                            index: '',
                            type: 'single',
                            title: '此操作将删除该班级, 是否继续?'
                        }
                    },
                    multipleDelete: {
                        type: 'multipleDelete',
                        toggle: false,
                        params: '',
                        data: {
                            index: '',
                            type: 'multiple',
                            title: '此操作将删除您选中的班级, 是否继续?'
                        }
                    },
                    add: {
                        type: 'add',
                        toggle: false,
                        params: '',
                        data: {}
                    },
                    info: {
                        type: 'info',
                        toggle: false,
                        params: '',
                        data: {}
                    },
                    change: {
                        type: 'change',
                        toggle: false,
                        params: '',
                        data: {}
                    },
                    bujiao: {
                        type: 'bujiao',
                        toggle: false,
                        params: '',
                        data: {}
                    }
                },
				portBntList: [
					// {
     //                    name:'个人信息',
     //                    type:'info'
     //                },
                    // {
                    //     name:'转班',
                    //     type:'change'
                    // },
                    {
                        name:'删除',
                        type:'singleDelete'
                    }
				]

			}
		},
		created () {
			console.log(this.params)
			this.$store.dispatch('changeTitle','班级学生管理');//修改title
		  this.$store.dispatch('changeRouterIndex','/admin/yushebj');//修改路由
			if(this.$route.query.iid){
					this.ysbjid = this.$route.query.iid
			}else{
				this.ysbjid = this.params.row.id
			}
			this.search()
		},
		methods: {
//			tableRowClassName (row, index) {//隔行变色颜色设置
//              // console.log(row)
//              if ( index%4 == 0) {
//                  return "table-cell-red";
//              }else if( index%4 == 1 ){
//                  return "table-cell-yellow";
//              }else if( index%4 == 2 ){
//                  return "table-cell-green";
//              }else{
//                  return "table-cell-blue"
//              }
//          },
  cancelf () {
            //sonpage 关闭
          this.$store.dispatch('changeTitle','首页');//修改title
          // this.params.toggle = false;
//          this.$emit('close',{type:'time',cancel:true})
          },
			search () {
				this.$store.state.loading = true;
				var logininfo = JSON.parse(localStorage.logininfo);
				this.axios.get(this.$store.state.api + 'xs/getysbjxs', {
					params: {

					   ysbjid:this.ysbjid +'',
                       yhid:logininfo.id+'',
                       xxid:logininfo.xxid+'',
											 pageindex: this.pageindex,
                       pagesize: this.pagesize,
					}
				}).then( res => {
					console.log(res);
					if (res.data.code == 1) {
						this.dataList = res.data.data.list;
						this.total = res.data.data.totalPage;
						this.$store.state.loading = false;
					}else{
						this.$store.dispatch('showAlert',res.data.msg)
						this.$store.state.loading = false;
					}
				})
			},

			cancel () {
				this.$emit('close',{type:'student',cancel:true})
			},

			handleSizeChange (val) {//每页显示条数触发事件
                this.pagesize = val;
                this.pageindex = 1;
                this.search();
            },

            handleCurrentChange (val) {//分页触发事件
                this.search();
            },
            checkSelect (selection, row) {//点击单选select触发事件
                let strID = [];
                selection.forEach(function(v,i){
                    strID.push(v.id)
                })
                this.multipleDelNum = strID.join(",");
            },
            checkall (selection) {//点击全选select触发事件
                let strID = [];

                selection.forEach(function(v,i){
                    strID.push(v.id)
                })
                this.multipleDelNum = strID.join(",");
            },


            /* 组件的弹框  */
            componentsShow (type,data) { //显示组件
                console.log(type,data)
                for ( let i in this.portComponents ) {
                    if (type == this.portComponents[i].type) {

                        this.portComponents[i].toggle = true;
                        this.portComponents[i].params = data;

                        if (this.portComponents[i].data.type == 'single') {
                            this.portComponents[i].data.index = data.row.id

                        }else if(this.portComponents[i].data.type == 'multiple'){
                            this.portComponents[i].data.index = this.multipleDelNum;

                        }else if(this.portComponents[i].type == 'test'){
                            this.portComponents[i].data.distinction  = "test";

                        }else if(this.portComponents[i].type == 'score'){
                            this.portComponents[i].data.distinction  = "score";

                        }else{
                            return;
                        }
                        return;
                    }
                }

            },
            componentsHide (setting) { //关闭组件
                console.log(setting)
                for ( let i in this.portComponents ) {
                    if (setting.type == this.portComponents[i].type) {
                        this.portComponents[i].toggle = false;

                        if (!setting.cancel) {
                           this.search();
                        }
                        return;
                    }
                }
            }


		},
		computed: {
			multipleDeleteDisabled () {
                console.log(this.multipleDelNum)
                if (this.multipleDelNum) {
                    return false;
                }else{
                    return true
                }
            }
		}
	}
</script>

<style lang="less" scope>

	.student {
		position: absolute;
		top:100px;left:0;
		width: 100%;
		height:100%;
		background: #E8EDF0;
		z-index: 99;
	}
	.wrap {
		text-align: left;
	}
	h2 {
		line-height: 40px;
	}

	.table {
		width: 95%;
		margin-top:20px;
		margin-left: 20px;
	}

	.btn {
		text-align: center;
		margin-left: 20px;
		 margin-top: 10px;
	}

	.submit {
		width: 120px;
	}
</style>
